<template>
  <div>
    <h1>
      {{ this.$store.getters.showNum }}
    </h1>
    <button @click="handle1">+1</button>
    <button @click="handle2">+5</button>
    <button @click="handle3">+1 Async</button>
    <button @click="handle4">+5 Async</button>
  </div>
</template>

<script>
export default {
  data() {
    return {}
  },
  created() {},
  methods: {
    handle1() {
      // commit专门用来触发mutations
      this.$store.commit('add')
    },
    handle2() {
      this.$store.commit('addN', 5)
    },
    handle3() {
      // dispatch专门用来触发action
      this.$store.dispatch('addAsync')
    },
    handle4() {
      this.$store.dispatch('addNAsync', 5)
    }
  }
}
</script>
